<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>首页</title>
    <style>
        .dashboard-card {
            transition: transform 0.3s;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
            height: 100%;
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
        }
        
        .dashboard-card .card-body {
            display: flex;
            flex-direction: column;
        }
        
        .dashboard-card .icon-box {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            margin-bottom: 1rem;
        }
        
        .dashboard-card .card-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .dashboard-card .card-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0;
        }
        
        .quick-action-card {
            border-radius: 0.5rem;
            transition: all 0.3s;
            text-decoration: none;
            color: inherit;
        }
        
        .quick-action-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
        }
        
        .quick-action-card .card-body {
            display: flex;
            align-items: center;
            padding: 1.25rem;
        }
        
        .quick-action-card .icon {
            width: 48px;
            height: 48px;
            border-radius: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-right: 1rem;
        }
        
        .recent-student-card {
            border-radius: 0.5rem;
        }
        
        .recent-student-card .card-header {
            background-color: transparent;
            border-bottom: 1px solid rgba(0,0,0,.125);
            padding: 1rem 1.25rem;
        }
        
        .recent-student-card .list-group-item {
            padding: 0.75rem 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .system-info-card {
            border-radius: 0.5rem;
        }
        
        .system-info-card .card-header {
            background-color: transparent;
            border-bottom: 1px solid rgba(0,0,0,.125);
            padding: 1rem 1.25rem;
        }
        
        .system-info-card .list-group-item {
            padding: 0.75rem 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <!-- Page Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="h4 mb-0">
                <i class="bi bi-speedometer2 me-2"></i>仪表盘
            </h2>
            <div>
                <span class="text-muted me-2">今天是</span>
                <span class="badge bg-light text-dark" id="current-date"></span>
            </div>
        </div>

        <!-- Statistics Cards -->
        <div class="row g-4 mb-4">
            <!-- Total Students Card -->
            <div class="col-md-6 col-lg-3">
                <div class="card dashboard-card bg-white">
                    <div class="card-body">
                        <div class="icon-box bg-primary bg-opacity-10 text-primary">
                            <i class="bi bi-people"></i>
                        </div>
                        <h5 class="card-title text-muted">学生总数</h5>
                        <p class="card-value text-primary" th:text="${totalStudents}">0</p>
                        <div class="mt-auto">
                            <small class="text-muted">
                                <i class="bi bi-arrow-up-short"></i>
                                较上月增长 5%
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Male Students Card -->
            <div class="col-md-6 col-lg-3">
                <div class="card dashboard-card bg-white">
                    <div class="card-body">
                        <div class="icon-box bg-info bg-opacity-10 text-info">
                            <i class="bi bi-gender-male"></i>
                        </div>
                        <h5 class="card-title text-muted">男生人数</h5>
                        <p class="card-value text-info" th:text="${maleCount}">0</p>
                        <div class="mt-auto">
                            <small class="text-muted">
                                占总人数 <span th:text="${totalStudents > 0 ? #numbers.formatPercent(maleCount / totalStudents, 1, 0) : '0%'}">0%</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Female Students Card -->
            <div class="col-md-6 col-lg-3">
                <div class="card dashboard-card bg-white">
                    <div class="card-body">
                        <div class="icon-box bg-danger bg-opacity-10 text-danger">
                            <i class="bi bi-gender-female"></i>
                        </div>
                        <h5 class="card-title text-muted">女生人数</h5>
                        <p class="card-value text-danger" th:text="${femaleCount}">0</p>
                        <div class="mt-auto">
                            <small class="text-muted">
                                占总人数 <span th:text="${totalStudents > 0 ? #numbers.formatPercent(femaleCount / totalStudents, 1, 0) : '0%'}">0%</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Classes Card -->
            <div class="col-md-6 col-lg-3">
                <div class="card dashboard-card bg-white">
                    <div class="card-body">
                        <div class="icon-box bg-success bg-opacity-10 text-success">
                            <i class="bi bi-building"></i>
                        </div>
                        <h5 class="card-title text-muted">班级数量</h5>
                        <p class="card-value text-success" th:text="${classCount}">0</p>
                        <div class="mt-auto">
                            <small class="text-muted">
                                平均每班 <span th:text="${classCount > 0 ? #numbers.formatDecimal(totalStudents / classCount, 1, 1) : '0'} + ' 人'">0 人</span>
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Row -->
        <div class="row g-4">
            <!-- Left Column -->
            <div class="col-lg-8">
                <!-- Recent Students -->
                <div class="card recent-student-card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-clock-history me-2"></i>最近添加的学生
                        </h5>
                        <a th:href="@{/students}" class="btn btn-sm btn-outline-primary">查看全部</a>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" th:if="${#lists.isEmpty(recentStudents)}">
                            <div class="text-center text-muted py-3">
                                <i class="bi bi-inbox fs-4 d-block mb-2"></i>
                                暂无学生数据
                            </div>
                        </li>
                        <li class="list-group-item" th:each="student : ${recentStudents}">
                            <div>
                                <span class="badge bg-light text-dark me-2" th:text="${student.studentNumber}"></span>
                                <span th:text="${student.name}"></span>
                                <span class="ms-2" th:class="${student.gender == '男' ? 'text-primary' : 'text-danger'}"
                                      th:text="${student.gender}"></span>
                            </div>
                            <div>
                                <span class="badge bg-info text-dark me-2" th:text="${student.className}"></span>
                                <small class="text-muted" th:text="${#temporals.format(student.enrollmentDate, 'yyyy-MM-dd')}"></small>
                                <a th:href="@{/students/{id}/edit(id=${student.id})}" class="btn btn-sm btn-link ms-2">
                                    <i class="bi bi-pencil"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <!-- Quick Actions -->
                <h5 class="mb-3">快速操作</h5>
                <div class="row g-3">
                    <!-- Add Student -->
                    <div class="col-md-6">
                        <a th:href="@{/students/new}" class="card quick-action-card">
                            <div class="card-body">
                                <div class="icon bg-primary bg-opacity-10 text-primary">
                                    <i class="bi bi-person-plus"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">添加学生</h6>
                                    <p class="text-muted mb-0 small">添加新的学生信息</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Search Student -->
                    <div class="col-md-6">
                        <a th:href="@{/students}" class="card quick-action-card">
                            <div class="card-body">
                                <div class="icon bg-info bg-opacity-10 text-info">
                                    <i class="bi bi-search"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">搜索学生</h6>
                                    <p class="text-muted mb-0 small">按姓名或班级搜索学生</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Statistics -->
                    <div class="col-md-6">
                        <a href="#" class="card quick-action-card">
                            <div class="card-body">
                                <div class="icon bg-success bg-opacity-10 text-success">
                                    <i class="bi bi-bar-chart"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">统计分析</h6>
                                    <p class="text-muted mb-0 small">查看学生数据统计</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Export Data -->
                    <div class="col-md-6">
                        <a href="#" class="card quick-action-card">
                            <div class="card-body">
                                <div class="icon bg-warning bg-opacity-10 text-warning">
                                    <i class="bi bi-file-earmark-excel"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">导出数据</h6>
                                    <p class="text-muted mb-0 small">导出学生数据报表</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Right Column -->
            <div class="col-lg-4">
                <!-- System Info -->
                <div class="card system-info-card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-info-circle me-2"></i>系统信息
                        </h5>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <span>系统版本</span>
                            <span class="badge bg-primary">v1.0.0</span>
                        </li>
                        <li class="list-group-item">
                            <span>Spring Boot</span>
                            <span class="badge bg-success">2.7.0</span>
                        </li>
                        <li class="list-group-item">
                            <span>数据库</span>
                            <span class="badge bg-info text-dark">MySQL</span>
                        </li>
                        <li class="list-group-item">
                            <span>服务器状态</span>
                            <span class="badge bg-success">正常</span>
                        </li>
                        <li class="list-group-item">
                            <span>最后更新</span>
                            <span class="text-muted" id="last-updated"></span>
                        </li>
                    </ul>
                </div>
                
                <!-- Help Card -->
                <div class="card bg-primary text-white">
                    <div class="card-body">
                        <h5 class="card-title">
                            <i class="bi bi-question-circle me-2"></i>需要帮助？
                        </h5>
                        <p class="card-text">如果您在使用系统过程中遇到任何问题，请查阅帮助文档或联系系统管理员。</p>
                        <a href="#" class="btn btn-light">查看帮助文档</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <th:block layout:fragment="scripts">
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Set current date
                const now = new Date();
                const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
                document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
                
                // Set last updated time
                const lastUpdated = new Date();
                document.getElementById('last-updated').textContent = lastUpdated.toLocaleString('zh-CN');
            });
        </script>
    </th:block>
</body>
</html>